<template>
  <view class="parkAddCar">
    <view class="top-part">
      <view>
        <view class="title">请输入车牌号</view>
        <view class="license" @tap="openKeyBoard">
          <block v-for="(item, index) in code" :key="index">
            <view class="edit_text">
              <view v-if="7==index&&!item.value" style="font-size:18rpx;color: #9a9a99;">新能源</view>
              <view v-else>{{ item.value }}</view>
              <view v-if="currentFocus==index&&isFocus" class="cursor" />
            </view>
          </block>
        </view>
      </view>
      <view class="query_btn" :style="'opacity:' + (currentFocus>6?'1':'0.5')" @tap="queryPay">确认绑定</view>
    </view>

    <view v-if="showKeyBoard" class="friendlyAlert" @click.stop="closeKeyBoard" />
    <license-plate v-if="showKeyBoard" ref="keyboard" @close-key-board="closeKeyBoard" @input-province="inputProvince" @input-city="inputCity" @input-license="inputLicense" @backspace="backspace" />
  </view>
</template>
<script>
import licensePlate from '@/components/licensePlate/licensePlate'
const util = require('@/utils/util.js')
export default {
  components: {
    licensePlate
  },
  data() {
    return {
      tabIndex: '0',
      code: [{
        value: ''
      }, {
        value: ''
      }, {
        value: ''
      }, {
        value: ''
      }, {
        value: ''
      }, {
        value: ''
      }, {
        value: ''
      }, {
        value: ''
      }],
      currentFocus: 0,
      isFocus: false,
      showKeyBoard: false,
      license_plate: '',
      mycarList: []
    }
  },
  onLoad() {
    this.init()
  },
  onReachBottom() {
  },

  methods: {
    init() {
      const mycar = uni.getStorageSync('MYCAR')
      if (mycar) {
        const mycarList = JSON.parse(mycar)
        this.mycarList = mycarList
        this.hidden_queit = false
      }
    },
    queryPay() {
      if (this.currentFocus < 7) {
        return
      }
      let plateNo = ''
      for (let i = 0; i < this.currentFocus; i++) {
        plateNo += this.code[i].value
      }

      const mycarList = this.mycarList
      if (mycarList) {
        if (mycarList.length < 4) {
          mycarList.push(plateNo)
          this.mycarList = mycarList
          uni.setStorageSync('MYCAR', JSON.stringify(mycarList))
        }
      }
      util.bak()
    },
    // 输入省份
    inputProvince(e) {
      var temp = this.code
      temp[0].value = e
      this.code = temp
      this.currentFocus = 1
    },
    // 输入城市
    inputCity(e) {
      var temp = this.code
      temp[1].value = e
      this.code = temp
      this.currentFocus = 2
    },
    // 输入车牌
    inputLicense(e) {
      var temp = this.code
      var i = this.currentFocus
      temp[i].value = e
      this.code = temp
      this.currentFocus = i + 1
    },
    // 退格
    backspace(i) {
      var temp = this.code
      temp[i].value = ''
      this.code = temp
      this.currentFocus = i
    },
    closeKeyBoard() {
      this.showKeyBoard = false
      this.isFocus = false
    },
    openKeyBoard() {
      this.showKeyBoard = true
      this.isFocus = true
      this.$nextTick(() => {
        this.$refs.keyboard.loadkeyboard(this.currentFocus, this.tabIndex)
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.top-part {
  height: 460rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.top-part .title {
  font-size: 26rpx;
  font-weight: bold;
  display: flex;
  justify-content: center;
  margin: 24rpx 0;
}
.license {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.edit_text {
  height: 72rpx;
  width: 72rpx;
  position: relative;
  border: 1rpx solid #727373;
  border-radius: 12rpx;
  line-height: 72rpx;
  text-align: center;
  font-size: 36rpx;
}
.license .edit_text:nth-child(2) {
  margin-right: 48rpx;
}
.license .edit_text:nth-child(2)::after {
  content: '';
  position: absolute;
  right: -34rpx;
  top: 45%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #979797;
}
.license .edit_text:nth-child(8) {
  border: 1px dashed #979797;
}
.cursor {
  width: 36rpx;
  height: 4rpx;
  background-color: #333333;
  animation: focus 1.2s infinite;
  position: absolute;
  left: 50%;
  margin-left: -18rpx;
  bottom: 14rpx;
}
.friendlyAlert {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
}
.query_btn {
  background-color: #dc7233;
  width: 80%;
  height: 74rpx;
  border-radius: 10rpx;
  line-height: 74rpx;
  text-align: center;
  color: white;
  letter-spacing: 6rpx;
  margin: 0 auto;
}
.queit {
  padding: 109rpx auto;
  margin: 64rpx 180rpx;
  border-radius: 9rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  font-size: 32rpx;
  background-color: #f1f1f1;
  height: 79rpx;
}
.queit .plantno {
  line-height: 79rpx;
  letter-spacing: 8rpx;
}
.queit .iconfont {
  margin: 15rpx;
  margin-left: 30rpx;
  color: #f1f1f1;
  font-size: 46rpx;
  background-color: #ccc;
  height: 44rpx;
  border-radius: 24rpx;
}
.log_box {
  padding: 54rpx 40rpx;
  background: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.log_menu_box {
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.log_menu_img {
  display: flex;
  justify-content: center;
}
.log_menu_img image {
  width: 78rpx;
  height: 78rpx;
}
</style>
